<template>
  <div>
    <el-row>
      <el-button
        @click="ShowOther()"
        :type="show_other ? 'info' : 'primary'"
        style="margin: 5px"
        size="mini"
        >{{ show_other ? "隐藏其他" : "显示其他" }}
      </el-button>
      
      <el-select name="acshow" v-model="acshow" size="mini" style="width:100px">
        <el-option :value="false" label="计划">计划</el-option>
        <el-option :value="true" label="计划&实际">计划&实际</el-option>
      </el-select>
      <!-- <el-button @click="acshow = !acshow" size="mini"
        >{{ acshow ? "计划" : "计划&实际" }}
      </el-button> -->
    </el-row>
    <gantt-elastic
      :acshow="acshow"
      :options="options"
      :tasks="tasks"
      :dynamic-style="dynamicStyle"
      @ready="binding"
      ref="gantt"
    >
      <gantt-elastic-header :options="options" slot="header">
      </gantt-elastic-header>
    </gantt-elastic>
    <el-popover
      :value="pop_show"
      trigger="manual"
      ref="popover"
      :title="task.label"
      placement="top"
      width="200"
      :style="
        'position:fixed;z-index:200;top:' +
        offset.y +
        'px;left:' +
        offset.x +
        'px;'
      "
    >
      <p>级别：{{ task.level }}</p>
      <p>描述：{{ task.description }}</p>
      <p>状态：{{ dataFormat("stateid", task.stateid) }}</p>
      <p>开始日期：{{ task.start }}</p>
      <p>结束日期：{{ task.end }}</p>
      <p v-if="acshow">实际开始日期：{{ task.acstart }}</p>
      <p v-if="acshow">实际结束日期：{{ task.acend }}</p>
      <p>进度：{{ task.percent }}%</p>
    </el-popover>
  </div>
</template>

<script>
import GanttElastic from "./gantt-elastic/GanttElastic";
import GanttElasticHeader from "./gantt-elastic-header/Header.vue";
import { getDataList, getData } from "@/api/dynamic/dynamic";

const options = {
  taskMapping: {
    progress: "percent",
  },
  title: {
    label: ``,
    html: true,
  },
  taskList: {
    display: true,
    columns: [
      {
        id: 1,
        label: "级别",
        value: "level",
        width: 50,
      },
      {
        id: 2,
        label: "名称",
        value: "label",
        width: 200,
        expander: true,
      },
      {
        id: 3,
        label: "所有者",
        value: "user",
        width: 100,
        html: true,
      },
      {
        id: 3,
        label: "计划开始日期",
        value: "start",
        width: 120,
      },
      {
        id: 4,
        label: "计划结束日期",
        value: "end",
        width: 120,
      },
      {
        id: 5,
        label: "进度(%)",
        value: "progress",
        width: 80,
        style: {
          "task-list-header-label": {
            "text-align": "center",
            width: "100%",
          },
          "task-list-item-value-container": {
            "text-align": "center",
          },
        },
      },
    ],
  },
  scroll: {
    scrolling: false,
  },
  maxHeight: window.innerHeight - 338,
  maxRows: 50,
  scope: {
    before: 0,
    after: 0,
  },
  calendar: {
    hour: {
      display: false,
    },
  },
  locale: {
    code: "en",
    Now: "当前时间",
    "X-Scale": "时间跨度",
    "Y-Scale": "行高",
    "Task list width": "列头宽度",
    "Before/After": "表格列宽",
    "Display task list": "显示列头",
    name: "en",
    weekdays: "周日_周一_周二_周三_周四_周五_周六".split("_"),
    weekdaysShort: "日_一_二_三_四_五_六".split("_"),
    weekdaysMin: "日_一_二_三_四_五_六".split("_"),
    months: "01_02_03_04_05_06_07_08_09_10_11_12".split("_"),
    monthsShort: "01_02_03_04_05_06_07_08_09_10_11_12".split("_"),
  },
};

export default {
  inject: ["app"],
  name: "ganttChart",
  components: {
    GanttElastic,
    GanttElasticHeader,
  },
  data() {
    return {
      Dstyle: {
        Expired: {
          //过期
          base: {
            fill: "#F56C6C",
            stroke: "#F56C6C",
          },
        },
        Execute: {
          //进行中
          base: {
            fill: "#67C23A",
            stroke: "#67C23A",
          },
        },
        Finished: {
          //完成
          base: {
            fill: "#409EFF",
            stroke: "#409EFF",
          },
        },
        Unstart: {
          //未开始
          base: {
            fill: "#E6A23C",
            stroke: "#E6A23C",
          },
        },
        Dfinished: {
          //延期完成
          base: {
            fill: "#9966ff",
            stroke: "#9966ff",
          },
        },
        Ofinished: {
          //按时完成
          base: {
            fill: "#99ccff",
            stroke: "#99ccff",
          },
        },
        Oimmature: {
          //未完成 计划内
          base: {
            fill: "#a5dc89",
            stroke: "#a5dc89",
          },
        },
        Dimmature: {
          //未完成 已延期
          base: {
            fill: "#34621d",
            stroke: "#34621d",
          },
        },
      },
      dataInfo: {},
      tasks: [],
      options,
      dynamicStyle: {},
      task: {},
      pop_show: false,
      show_other: true,
      acshow: false,
      offset: { x: 0, y: 0 },
    };
  },
  created() {
    this.getDataInfo(this.$route.params.Id);
    this.getList();
  },
  watch: {
    "app.screenHeight": function (val) {
      this.options.maxHeight = val - 338;
    },
  },
  methods: {
    getList() {
      getDataList("/pmswbs/list?projectid=" + this.$route.params.Id).then(
        (response) => {
          this.updateData([this.dataInfo].concat(response.rows));
        }
      );
    },
    getDataInfo(id) {
      getData("/pmsproject", id).then((response) => {
        if (response.code == 200) {
          this.dataInfo = response.data;
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    updateData(rows) {
      for (let i in rows) {
        let row = rows[i];
        const task = {
          id: row.id,
          parentId:
            row.level == 1
              ? parseInt(this.$route.params.Id)
              : row.parentid == 0
              ? null
              : row.parentid,
          label: row.name,
          level: row.rank ? row.rank : 0,
          description: row.description,
          user: this.dataFormat("ownerid", row.ownerid),
          start: row.esstartdate,
          end: row.esfinishdate,
          acstart: row.acstartdate,
          acend: row.acfinishdate,
          percent: row.percent,
          stateid: row.stateid,
          type: "project",
          style: this.Dstyle[this.getStyle(row)],
          acstyle: this.Dstyle[this.getacStyle(row)],
          collapsed: i == 0 ? false : true,
        };
        this.tasks.push(task);
      }
    },
    getStyle(row) {
      let state = this.dataFormat("stateid", row.stateid);
      if (state == "创建") {
        return "Unstart";
      } else if (state == "完成") {
        if (
          row.acfinishdate &&
          new Date(row.acfinishdate).valueOf() <
            new Date(row.esfinishdate).valueOf()
        ) {
          return "Finished";
        } else {
          return "Dfinished";
        }
      } else {
        if (new Date().valueOf() > new Date(row.esfinishdate).valueOf()) {
          return "Expired";
        } else {
          return "Execute";
        }
      }
    },
    getacStyle(row) {
      if (row.acfinishdate) {
        if (
          new Date(row.acfinishdate).valueOf() >
          new Date(row.esfinishdate).valueOf()
        ) {
          //延期完成
          return "Dfinished";
        } else {
          //按时完成
          return "Ofinished";
        }
      } else {
        if (
          new Date(row.acstartdate).valueOf() <
            new Date(row.esfinishdate).valueOf() &&
          new Date(row.esfinishdate).valueOf() > new Date().valueOf()
        ) {
          // 未完成 计划内
          return "Oimmature";
        } else {
          // 未完成 已延期
          return "Dimmature";
        }
      }
    },
    binding(ganttElasticInstance) {
      ganttElasticInstance.$on("chart-project-mouseover", ({ data, event }) => {
        event.target.style.cursor = "pointer";
        this.task = data;
        this.pop_show = true;
        this.offset.x =
          event.clientX - 100 < 0
            ? 0
            : document.body.clientWidth - event.clientX < 100
            ? document.body.clientWidth - 200
            : event.clientX - 100;
        this.offset.y =
          document.body.clientHeight - event.clientY < 270
            ? event.clientY - 270
            : event.clientY + 10;
      });
      ganttElasticInstance.$on("chart-project-mouseout", ({ data, event }) => {
        this.pop_show = false;
      });
    },
    ShowOther() {
      if (this.show_other) {
        this.$refs.gantt.getTaskListColumns.filter((item) => {
          if (item.value != "label" && item.value != "level") {
            item.width = 0;
          }
          return item;
        });
      } else {
        this.$refs.gantt.getTaskListColumns.filter((item, index) => {
          if (item.value != "label" && item.value != "level") {
            item.width = this.options.taskList.columns[index].width;
          }
          return item;
        });
      }
      this.show_other = !this.show_other;
    },
  },
};
</script>